<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>列表渲染指令</title>
    <style type="text/css">
        code { border: 1px solid #d1d1d1; background: #f0f0f0; }
        .root { border: 1px solid blue; }
        .students { display: flex; }
        .students>* { flex-basis: 15%; text-align: center ; }
    </style>
</head>
<body>

    <h3>列表渲染指令</h3>
    <a href="https://v3.cn.vuejs.org/guide/list.html">列表渲染</a>
    <ul>
        <li>
            使用 v-for 时需要指定表达式 <code>v-for="expression"</code> 
            <ul>
                <li> <code>v-for="book in books"</code> </li>
                <li> <code>v-for="(book, index) in books"</code> </li>
            </ul>
        </li>
    </ul>

    <hr>

    <div class="root">
        <div class="students">
            <!-- 这里通过 v-bind 指令 为 span 绑定惟一的 key -->
            <span v-for="stu in students" v-bind:key="stu.id">{{ stu.name }}</span>
        </div>
    </div>

    <script src="../scripts/vue@3.2.31.js" type="text/javascript"></script>

    <script type="text/javascript">
        const app = Vue.createApp({
            data(){
                return {
                    students: [
                        { id: 1234 , name: '孙悟空' },
                        { id: 5678 , name: '猪悟能' },
                        { id: 6543 , name: '沙悟净' }
                    ]
                }
            }
        });

        const root = app.mount( '.root' );
        console.log( root );
    </script>
    
</body>
</html>